<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      html,
      body {
        margin: 0;
      }
      .color1 {
        color: #e60012;
      }
      .color2 {
        color: #eb6100;
      }
      .color3 {
        color: #f39800;
      }
      .color4 {
        color: #fcc800;
      }
      .color5 {
        color: #fff100;
      }
      .color6 {
        color: #cfdb00;
      }
      .color7 {
        color: #8fc31f;
      }
      .color8 {
        color: #22ac38;
      }
      .color9 {
        color: #009944;
      }
      .color10 {
        color: #009b6b;
      }
      .color11 {
        color: #009e96;
      }
      .color12 {
        color: #00a0c1;
      }
      .color13 {
        color: #00a0e9;
      }
      .color14 {
        color: #0086d1;
      }
      .color15 {
        color: #0068b7;
      }
      .color16 {
        color: #00479d;
      }
      .color17 {
        color: #1d2088;
      }
      .color18 {
        color: #601986;
      }
      .color19 {
        color: #920783;
      }
      .color20 {
        color: #be0081;
      }
      .color21 {
        color: #e4007f;
      }
      .color22 {
        color: #e5006a;
      }
      .color23 {
        color: #e5004f;
      }
      .color24 {
        color: #e60033;
      }
      .word {
        font-size: 20px;
      }
      .content {
        text-align: center;
        font-size: 0;
      }
      .blink {
        font-size: 20px;
        animation: fade 500ms infinite;
        -webkit-animation: fade 500ms infinite;
      }
      @keyframes fade {
        from {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    </style>
  </head>

  <body>
    <div class="content">
      <span class="word color23">h</span>
      <span class="word color22">e</span>
      <span class="word color4">l</span>
      <span class="word color24">l</span>
      <span class="word color17">o</span>
      <span class="word color2">&nbsp;</span>
      <span class="word color9">w</span>
      <span class="word color3">o</span>
      <span class="word color1">r</span>
      <span class="word color23">l</span>
      <span class="word color15">d</span>
      <br />
      <span class="word color15">你</span>
      <span class="word color13">好</span>
      <span class="word color16">世</span>
      <span class="word color19">界</span>
      <span class="blink" id="jsBlink">|</span>
    </div>
    <script type="text/javascript">
        /**
         * 非常有意思的一题哇，
         * 测例也比较完善，没啥好注意的，全是逻辑，当然要严格按照标准来，要不然可是过不了的 🤣🤣🤣
         * 这题的内容确实也可以封装起来当组件玩
         */
      //测例
      //   output(' <>\n \n <> ');
      function output(str) {
        let fatherContentDom = document.getElementsByClassName("content")[0];
        let spanWordDom = document.getElementsByClassName("word");
        let blinkDom = document.getElementById("jsBlink");
        let newIndex = 0;

        //移除原本的内容：除了最后的blinkDom
        while (fatherContentDom.childElementCount > 1) {
          fatherContentDom.removeChild(fatherContentDom.firstChild);
        }

        //定时输出
        let timer = setInterval(function () {
          let newDom = null;
          if (str[newIndex] == "\n") {
            //判断为换行符的情况
            newDom = document.createElement("br");
          } else {
            //判断为字符的情况
            newDom = document.createElement("span");
            newDom.className = `word color${~~(Math.random() * 24 + 1)}`; //使用随机颜色并取整
            newDom.innerHTML = str[newIndex];

            //特殊字符处理：空格、<、>
            switch (str[newIndex]) {
              case " ":
                newDom.innerHTML = "&nbsp;";
                break;
              case "<":
                newDom.innerHTML = "&lt;";
                break;
              case ">":
                newDom.innerHTML = "&gt;";
                break;
            }
          }

          //插入在指针前面
          fatherContentDom.insertBefore(newDom, blinkDom);

          //字符串指针后移
          newIndex++;

          //判断是否结束
          if (newIndex === str.length) {
            clearInterval(timer);
          }
        }, 200);
      }
    </script>
  </body>
</html>
